
<!-- 弹出层内容组件-->
<template>
  <div class="message-modal-box">
    <!-- 内容 -->
    <div class="message-main-box" :style="{'width': info.width, 'height': info.height}">
      <div class="layui-layer-title">{{info.title}}</div>
      <div>
        <slot name="main"></slot>
      </div>
      <span class="layui-layer-setwin">
        <a @click="close()" class="layui-layer-ico layui-layer-close1" href="javascript:void(0);"></a>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['info'],
  data () {
    return { }
  },
  methods: {
    close () {
      this.$emit('closeFn')
    }
  }
}
</script>

<style scoped lang="scss">
$icon:'../../assets/res/img/icon_re.png';
.message-modal-box{
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right: 0;
  background-color:rgba(0, 0, 0, .3);
  z-index: 10000;
}
.message-main-box{
  width: 548px !important;
  height: 324px !important;
    border-radius: 10px !important;
  background-color: #fff;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.message-main-box .ans-c{
  padding: 0 22px;
}
.layui-layer-title{
  height: 46px;
  font-size: 16px;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
}
</style>
